﻿@{
    ViewBag.Title = "EL图片检索";
}
<hr />
<link href="~/Plug/layui/css/layui.css" rel="stylesheet" />
<link rel="stylesheet" href="~/Plug/mousewheel/src/css/mag.css" />
<link rel="stylesheet" href="~/Plug/mousewheel/src/theme/default.css" />
<link rel="stylesheet" href="~/Plug/mousewheel/css/index.css" />
<style type="text/css">
    .controls-btns button {
        color: #333;
    }

    .mt50 {
        margin-top: 50px;
    }
</style>

<div class="form-group" id="conditions">
    <div class="form-group" style="margin-top: 60px;">
        <div class="form-inline">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label>车间：</label> @Html.DropDownList("workshops") &nbsp;&nbsp;&nbsp;
            <label>机台号：</label><select id="machines"><option>--请选择--</option></select>&nbsp;&nbsp;&nbsp;
            <label>班组：</label>@Html.DropDownList("teams") &nbsp;&nbsp;&nbsp;
            <label>是否合格：</label><select id="isquality"><option>--请选择--</option><option value="1">合格</option><option value="2">不合格</option></select>&nbsp;&nbsp;&nbsp;
            <label>箱号：</label><input type="text" class="form-control" id="boxnum" style="width: 22%" />
        </div>

        <br />
        <div class="form-inline">
            <label>起止时间：</label><input class="laydate-icon form-control" id="timespan">&nbsp;&nbsp;&nbsp;
            <label>sn号：</label><textarea id="snlist" rows="1" class="form-control" style="min-height:36px;min-width:200px" placeholder="多个号码用“,”隔开，连续号段用“-”区分，可直接复制"></textarea>&nbsp;&nbsp;&nbsp;
            
            <div class="btn-group">
                <button type="button" class="btn btn-default" id="btnSearch" onclick="search(0)">检索</button>
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li id="btnSearchTwice" onclick="search(1)" style="display:none"><a href="#">二次检索</a></li>
                </ul>
            </div>            
            <input type="button" id="btnDownload" value="下载" class="btn btn-success" />
            <input type="button" id="btnEditRange" value="批量修改" class="btn btn-primary" data-toggle="modal" data-target="#EditModel" style="display:none" onclick="editImageRange()" />
        </div>
    </div>
    <p></p>
</div>
<hr />
<div class="row">
    <div class="tabbable">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">缩略图展示</a></li>
            <li><a href="#tab2" data-toggle="tab">列表展示</a></li>
        </ul>
        <div class="tab-content">
            <div id="tab1" class="tab-pane active">
                <div class="row" id="thumbList">
                </div>
            </div>
            <div id="tab2" class="tab-pane">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>名称</th>
                            <th>时间</th>
                            <th>硬盘id</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="infoList"></tbody>
                </table>
            </div>
            <div id="page" style="text-align:center"></div>
        </div>
    </div>
</div>

<div class="modal fade" id="EditModel" tabindex="-1" role="dialog" aria-labelledby="EditModelLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="ModalLabel">修改图片</h4>
            </div>
            <div class="modal-body">
                <div class="alert-danger" role="alert" id="f_message" style="display:none"><span class="glyphicon glyphicon-remove" id="f_msg"></span></div>
                <table border="0" width="500">
                    <tr id="tr_ImgName">
                        <td>
                            <label>图片名称:</label><span id="ImgName"></span><span id="e_ImageID" style="display:none"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>车间</label> @Html.DropDownList("workshops_e") &nbsp;&nbsp;&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>机台号</label><select id="machines_e"><option>--请选择--</option></select>&nbsp;&nbsp;&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>班组</label>@Html.DropDownList("teams_e") &nbsp;&nbsp;&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>是否合格</label><select id="isquality_e"><option>--请选择--</option><option value="1">合格</option><option value="2">不合格</option></select>&nbsp;&nbsp;&nbsp;
                        </td>
                    </tr>
                </table>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <a href="#" type="button" class="btn btn-primary" id="e_save">提交</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="DownloadModel" tabindex="-1" role="dialog" aria-labelledby="DownloadModelLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class ="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="ModalLabel">下载列表（超过100张图片，每100张打一个压缩包）</h4>
            </div>
            <div class="modal-body">
                <div class="alert-danger" role="alert" id="f_message" style="display:none"><span class="glyphicon glyphicon-remove" id="f_msg"></span></div>
                <table border="0" width="500">
                    <tr id="downloadlist"></tr>
                </table>
            </div>
        </div>
    </div>
</div>



<script type="text/html" id="thumbTpl">
    {{# for(var i= 0; i < d.length; i++){ }}
    <p></p>
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img data-src="holder.js/100%x200" alt="100%x200" name="{{ d[i].ImageName }}" onerror="javascript: this.src = '/Content/Img/noImage.jpg'" onclick="getDetail('/Images/{{ d[i].ImageName }}', this.name, '{{ d[i].UserNum }}')" src="/Images/{{ d[i].ImageName.replace('.','_Thumb.') }}" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
            <div class="caption">
                <p><a href="javascript:void(0)" onclick="getDisk('{{ d[i].DiskID }}')">{{ d[i].ImageName }}</a></p>
                <p><a href="./images/{{ d[i].ImageName }}" target="_blank" class="btn btn-primary" role="button">详情</a> <a href="" class="btn btn-warning" onclick="editImage('{{ d[i].ImageID }}', '{{ d[i].ImageName }}')" data-toggle="modal" data-target="#EditModel">修改</a> <a href="javascript:void(0)" id="{{ d[i].ImageID }}" onclick="    deleteImage(this.id)" class="btn btn-danger" role="button">删除</a></p>
            </div>
        </div>
    </div>
    {{# } }}
</script>
<script type="text/html" id="infoTpl">
    {{# for(var i = 0; i < d.length; i++){ }}
    <tr>
        <td>{{ d[i].ImageID }}</td>
        <td><a href="javascript:void(0)" onclick="getDetail('/Images/{{ d[i].ImageName }}', '{{ d[i].ImageName }}', '{{ d[i].UserNum }}')" style="color: #2a6496">{{ d[i].ImageName }}</a></td>
        <td>{{ d[i].Created_at }}</td>
        <td><a href="javascript:void(0)" onclick="getDisk('{{ d[i].DiskID }}')">{{ d[i].DiskID }}</a></td>
        <td><a href="./images/{{ d[i].ImageName }}" target="_blank" class="btn btn-primary" role="button">详情</a> <a href="" class="btn btn-warning" onclick="editImage('{{ d[i].ImageID }}', '{{ d[i].ImageName }}')" data-toggle="modal" data-target="#EditModel">修改</a> <a href="javascript:void(0)" id="{{ d[i].ImageID }}" onclick="deleteImage(this.id)" class="btn btn-danger" role="button">删除</a></td>
    </tr>
    {{# } }}
</script>
<script src="~/Plug/laydate/laydate.js"></script>
<script type="text/javascript" src="~/Plug/layui/layui.all.js"></script>
<script src="~/Plug/mousewheel/js/jquery.bridget.js"></script>
<script src="~/Plug/mousewheel/js/jquery.mousewheel.min.js"></script>
<script src="~/Plug/mousewheel/js/jquery.event.drag.js"></script>
<script src="~/Plug/mousewheel/js/screenfull.js"></script>
<script src="~/Plug/mousewheel/js/hammer.min.js"></script>
<script src="~/Plug/mousewheel/js/PreventGhostClick.js"></script>
<script src="~/Plug/mousewheel/src/js/mag-analytics.js"></script>
<script src="~/Plug/mousewheel/src/js/mag.js"></script>
<script src="~/Plug/mousewheel/src/js/mag-jquery.js"></script>
<script src="~/Plug/mousewheel/src/js/mag-control.js"></script>
<script src="~/Plug/mousewheel/js/index.js"></script>

<script>
    $(window).load(function () {
        $('img').each(function () {
            if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
                this.src = '~/Content/Img/noImage.jpg';
            }
        });
    });
    var layer;
    var flag = 0;
    layui.use('layer', function () {
        layer = layui.layer;
    })
    $(document).ready(function () {
        $('select').addClass("form-control").width("100px");        
    })

    $('#workshops').change(function () {
        var workshopid = $('#workshops').val();
        if (workshopid) {
            $.ajax({
                url: '/home/getMachine',
                type: 'get',
                data: { "workshopid": workshopid },
                dataType: 'json',
                scriptCharset: 'utf-8',
                success: function (data) {
                    $('#machines').empty();
                    $('#machines').append("<option value>--请选择--</option>");
                    var json = eval('(' + data.rows + ')');
                    for (var i = 0; i < data.total; i++) {
                        var option = $("<option>").val(json[i]["MachineID"]).text(json[i]["MachineNum"]);
                        $('#machines').append(option);
                    }
                },
                error: function () {
                    layer.alert("网络错误", { icon: 2 });
                }
            })
        }
        else {
            $('#machines').empty();
            $('#machines').append("<option value>--请选择--</option>");
        }
    })
    //代码重复！fuck，为了效果和时间先这么着吧！后面又看到这段代码的同学，你再改吧，^_^
    $('#workshops_e').change(function () {
        var workshopid = $('#workshops_e').val();
        if (workshopid) {
            $.ajax({
                url: '/home/getMachine',
                type: 'get',
                data: { "workshopid": workshopid },
                dataType: 'json',
                scriptCharset: 'utf-8',
                success: function (data) {
                    $('#machines_e').empty();
                    var json = eval('(' + data.rows + ')');
                    $('#machines_e').append("<option value>--请选择--</option>");
                    for (var i = 0; i < data.total; i++) {
                        var option = $("<option>").val(json[i]["MachineID"]).text(json[i]["MachineNum"]);
                        $('#machines_e').append(option);
                    }
                },
                error: function () {
                    layer.alert("网络错误", { icon: 2 });
                }
            })
        }
        else {
            $('#machines').empty();
            $('#machines').append("<option value>--请选择--</option>");
        }
    })

    $('#btnDownload').click(function () {
        layer.load(2);
        var workshopName = $("#workshops").find("option:selected").text();
        $.ajax({
            url: '/home/Download',
            type: 'post',
            data: { "flag": flag, "workshopName": workshopName },
            dataType: 'json',
            success: function (json) {
                layer.closeAll();
                if (json.total > 0) {
                    document.getElementById("downloadlist").innerHTML = "";
                    for (var i = 0; i < json.total; i++) {
                        document.getElementById("downloadlist").innerHTML += "<a href=" + json['info'][i] + ">下载包" + (i + 1) + "</a>&nbsp;&nbsp;";
                    }
                    $('#DownloadModel').modal('show');
                }
                else {
                    layer.msg(json['info']);
                }
            },
            error: function () {
                layer.alert("网络错误", { icon: 2 });
            }
        })
    })

    $('#e_save').click(function () {
        console.log("知道你懂行，但不要调皮的修改参数值哦！");
        var imageid = document.getElementById("e_ImageID").innerHTML;
        var workshopid = $("#workshops_e").val();
        var machineid = $('#machines_e').val();
        var teamid = $('#teams_e').val();
        var qualityid = $('#isquality_e').val();
        var workshopName = $("#workshops_e").find("option:selected").text();
        var teamName = $("#teams_e").find("option:selected").text();
        var machineNum = $("#machines_e").find("option:selected").text();
        var quality = $("#isquality_e").find("option:selected").text();
        var _url = '/home/EditImage';
        var _data = { "imageid": imageid, "qualityid": qualityid, "machineid": machineid, "teamid": teamid, "workshopid": workshopid, "quality": quality, "machineNum": machineNum, "teamName": teamName, "workshopName": workshopName };
        if (imageid == 0) {
            _url = '/home/EditImageRange';
            _data = { "qualityid": qualityid, "machineid": machineid, "teamid": teamid, "workshopid": workshopid, "quality": quality, "machineNum": machineNum, "teamName": teamName, "workshopName": workshopName };
        }

        $.ajax({
            url: _url,
            type: 'post',
            dataType: 'json',
            data: _data,
            success: function (json) {
                if (json.code == 1) {
                    $('#EditModel').modal('hide');
                    layer.msg(json.info, { icon: 1 }, function () { search(0); });
                }
                else
                {
                    layer.alert(json.info);
                }
                
            },
            error: function () {
                layer.alert("网络错误", { icon: 2 });
            }
        })
    })

    $('#snlist').click(function () {
        layer.tips('例：173504000400001,\r\n173504000400005,\r\n173504000400009 \r\n(这里的逗号是英文逗号) 或者 173504000400001-173504000400009 或者 173504000400001-00009（注意连续号段可以“-”后面可以只输入后5位，0不可省略）', '#snlist', {
            tips: [3, '#78BA32'],
            time: 6000, //6秒后自动关闭
        });
    })

    //单条修改
    function editImage(id, name) {
        document.getElementById("e_ImageID").innerHTML = id;
        document.getElementById("ImgName").innerHTML = name;
    }

    //批量修改
    function editImageRange() {
        document.getElementById("e_ImageID").innerHTML = 0;
        document.getElementById("ImgName").innerHTML = "批量修改";
    }

    function search(istwice) {        
        var workshopName = $("#workshops").find("option:selected").text();
        var machineid = $('#machines').val();
        var teamid = $('#teams').val();
        var boxnum = $('#boxnum').val();
        var qualityid = $('#isquality').val();
        var timespan = $('#timespan').val();
        var snlist = $('#snlist').val();
        layer.load();
        
        $.ajax({
            url: '/home/getResult',
            type: 'post',
            dataType: 'json',
            data: { "workshopName": workshopName, "machineid": machineid, "teamid": teamid, "boxnum": boxnum, "qualityid": qualityid, "timespan": timespan, "sns": snlist, "twice": istwice },
            success: function (data) {
                layer.closeAll('loading');
                if (data.count == 0) {
                    layer.msg("无结果");
                    document.getElementById("thumbList").innerHTML = "";
                    document.getElementById('infoList').innerHTML = "";
                    document.getElementById('page').innerHTML = "";
                    flag = 0;
                }
                else if (data.count == -1) {
                    layer.msg(data.ret)
                }
                else {
                    var json = eval('(' + data.ret + ')');
                    layui.use('laytpl', function () {
                        var laytpl = layui.laytpl;
                        var thumbTpl = document.getElementById("thumbTpl").innerHTML;
                        var thumb_view = document.getElementById("thumbList");
                        laytpl(thumbTpl).render(json, function (html) {
                            thumb_view.innerHTML = html;
                        })
                        var infoTpl = document.getElementById("infoTpl").innerHTML;
                        var info_view = document.getElementById('infoList');
                        laytpl(infoTpl).render(json, function (html) {
                            info_view.innerHTML = html;
                        })
                        flag = 1;
                    })
                    layui.use('laypage', function () {
                        var laypage = layui.laypage;
                        laypage.render({
                            elem: 'page',
                            count: data.count,
                            limit: 12,
                            layout: ['count', 'prev', 'page', 'next', 'skip'],
                            jump: function (obj, first) {
                                var pageindex = (obj.curr - 1) * 12;
                                if (!first) {
                                    layer.load();
                                    var JsonData = { "workshopName": workshopName, "machineid": machineid, "teamid": teamid, "boxnum": boxnum, "qualityid": qualityid, "timespan": timespan, "sns": snlist, "twice": istwice, "pageindex": pageindex };
                                    jump(JsonData);
                                }
                            }
                        })
                    })
                    $("#btnSearchTwice").show();
                    $("#btnEditRange").show();
                }
            },
            error: function () {
                layer.alert("网络错误", { icon: 2 }, function () { location.reload(true) });

            }
        });
    }

    function jump(JsonData) {
        $.ajax({
            url: '/home/getResult',
            type: 'post',
            dataType: 'json',
            data: JsonData,
            success: function (data) {
                layer.closeAll('loading');
                if (data.count == 0) {
                    layer.msg("无结果");
                }
                else {
                    var json = eval('(' + data.ret + ')');
                    layui.use('laytpl', function () {
                        var laytpl = layui.laytpl;
                        var getTpl = document.getElementById("thumbTpl").innerHTML;
                        var view = document.getElementById("thumbList");
                        laytpl(getTpl).render(json, function (html) {
                            view.innerHTML = html;
                        })
                        var infoTpl = document.getElementById("infoTpl").innerHTML;
                        var info_view = document.getElementById('infoList');
                        laytpl(infoTpl).render(json, function (html) {
                            info_view.innerHTML = html;
                        })
                    });
                }
            },
            error: function () {
                layer.alert("网络错误");
            }
        })
    }

    function getPageList(count) {
        var workshopName = $("#workshops").find("option:selected").text();
        var machineid = $('#machines').val();
        var teamid = $('#teams').val();
        var boxnum = $('#boxnum').val();
        var qualityid = $('#isquality').val();
        var createdat = $('#timespan').val();
        var snlist = $('#snlist').val();
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            laypage.render({
                elem: 'page',
                count: count,
                limit: 12,
                layout: ['count', 'prev', 'page', 'next', 'skip'],
                jump: function (obj, first) {
                    var pageindex = (obj.curr - 1) * 12;
                    if (!first) {
                        layer.load();
                        $.ajax({
                            url: '/home/getResult',
                            type: 'post',
                            dataType: 'json',
                            data: { "workshopName": workshopName, "machineid": machineid, "teamid": teamid, "boxnum": boxnum, "qualityid": qualityid, "createdat": createdat, "sns": snlist, "pageindex": pageindex, "pagesize": 12 },
                            success: function (data) {
                                layer.closeAll('loading');
                                if (data.count == 0) {
                                    layer.msg("无结果");
                                    document.getElementById("thumbList").innerHTML = "";
                                }
                                else {
                                    var json = eval('(' + data.ret + ')');
                                    layui.use('laytpl', function () {
                                        var laytpl = layui.laytpl;
                                        var getTpl = document.getElementById("thumbTpl").innerHTML;
                                        var view = document.getElementById("thumbList");
                                        laytpl(getTpl).render(json, function (html) {
                                            view.innerHTML = html;
                                        })
                                    });
                                    getPageList(data.count);
                                }
                            },
                            error: function () {
                                layer.alert("网络错误", { icon: 2 });
                            }
                        })
                    }
                }
            })
        })
    }

    function getDetail(src, name, operator) {
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.open({
                type: 1,
                title: "上传员工："+operator+","+name,
                closeBtn: 1,
                area: ['1200px', '650px'],
                shadeClose: true,
                content: '<div mag-thumb="inner" class="mag-eg-el"><img src = ' + src + ' style="height: 650px;width:100%" onerror="javascript:this.src=\'/Content/Img/noImage.jpg\'"></div><div mag-zoom="inner" class="mag-eg-el"><img src=' + src + '  /></div>'
            })
            $host = $('[mag-thumb="inner"]');
            $host.mag();
        })
    }
    

    function deleteImage(id) {
        layer.confirm('确定要删除该图吗？', {
            btn: ['确定', '取消']
        }, function () {
            layer.load();
            $.ajax({
                url: '/home/DeleteImage',
                type: 'post',
                data: { "imageid": id },
                success: function (json) {
                    layer.closeAll('loading');
                    if (json.code == 1)
                        layer.msg(json.info, { icon: 1 }, function () { search(0); });
                    else
                        layer.alert("权限不足，删除失败！");
                },
                error: function () {
                    layer.alert("网络错误", { icon: 2 });
                }
            })
        }, function () {
            layer.closeAll();
        })

    }

    function getDisk(diskID) {
        $.ajax({
            url: '/home/getDisk',
            type: 'get',
            data: { "diskID": diskID },
            success: function (json) {
                layer.alert("该图片所属硬盘卷标为:"+json.info);
            },
            error: function () {
                layer.alert("网络错误", { icon: 2 });
            }
        })
    }

    

    //执行一个laydate实例
    laydate.render({
        elem: '#timespan' //指定元素
         , type: 'datetime'
         , range: true
    })
</script>